<!-- <template>
    <div>
        课程详情简介-评论弹窗


    </div>
</template> -->
<script setup lang="ts">
function onClickLeft() {
    history.back()
}
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
//————————————————————————————————————————————播放视频
import cover from '../../assets/home/detail/videoView.png'
const show: Ref<boolean> = ref(false);
//显示遮罩层的方法
function showVideo() {
    show.value = true
    if (videoRef.value) {
        //继续自动播放 
        videoRef.value.play()
    }
}
const videoRef: Ref<any> = ref()
//关闭遮罩层
function stopClick() {
    show.value = false
    //暂停视频声音
    videoRef.value.pause()
}
//简介信息
import portrait from '../../assets/home/detail/zyh.png'
import classtime from '../../assets/home/detail/time.png'
import camera from '../../assets/home/detail/camera.png'
import collection from '../../assets/home/detail/collection.png'
import student from '../../assets/home/detail/student.png'
import { gettabList, getstudentList, getdetailcouresepicList } from '@/api/user'


const tabName = ref('')
//获取学员信息
const studentInfo: Ref<string[]> = ref([])
const courseInfo: Ref<string[]> = ref([])

onMounted(() => {
    gettabList({}).then(res => {
        // console.log(5, res.data);

        tabName.value = res.data.tabList
    })

    getstudentList({}).then(res => {
        // console.log(7, res.data.studentList);
        studentInfo.value = res.data.studentList

    })
    getdetailcouresepicList({}).then(res => {
        console.log(8, res.data.detailcouresepicList);
        courseInfo.value = res.data.detailcouresepicList

    })
})

const active = ref(0)

import pic1 from '../../assets/home/detail/pic1.png'
import pic2 from '../../assets/home/detail/pic2.png'
import pic3 from '../../assets/home/detail/pic3.png'
import pic4 from '../../assets/home/detail/pic4.png'
const studentPic: Ref<string[]> = ref([pic1, pic2, pic3, pic4])
//评论
import eye from '@/assets/home/detail/eye.png'
import comment from '@/assets/home/detail//comment.png'
import thumbsup from '@/assets/home/detail/thumbsup.png'
//收藏
const iconRef=ref()
function changeCollection(){
    console.log(9,iconRef.value.name);
    
iconRef.value.name='star'
console.log(99,iconRef.value.name);
}
</script>
<template>
    <!-- 课程详情简介 -->
    <div v-if="$route.path == '/home/summary'" class="coursedetail content">
        <header>
            <van-nav-bar left-text="返回" title="课程详情" left-arrow @click-left="onClickLeft">
                <template #right>
                    <van-icon ref="iconRef" name="star-o" size="18" @click="changeCollection"/>

                </template>
            </van-nav-bar>

        </header>
        <main>
            <img :src="cover" alt="" class="cover">
            <section>
                <div @click="showVideo" class="video-btn">
                    <van-icon size="16" name="play" color="#fff" />
                </div>
                <!-- 弹出播放视频的组件 -->
                <van-overlay :show="show" @click="stopClick">
                    <div class="wrapper" @click.stop>
                        <video ref="videoRef" autoplay controls class="my-video"
                            src="https://vod.300hu.com/vod/product/90f8f9da-08dc-43c8-8205-bbdb60cb9fad/1091_c7db5e75f_f.mp4?source=1&h265=1092h_e1c47f736_f.mp4"></video>
                    </div>
                </van-overlay>
            </section>
            <!-- 简介信息-->
            <div class="abstractInfo">
                <div class="teacher_info">
                    <van-image :src="portrait" round width="0.3rem" height="0.3rem"></van-image>
                    <span>张宇航</span>
                </div>
                <p style="font-size: 0.16rem;margin: 10px 0;">深入探讨如何将 AI 技术与 Go 应用快速融合，助力 GO 工程师轻松提升 GO+AI 项目实战经验!</p>
                <p class="classdata">
                <div class="column1">
                    <van-image :src="classtime"></van-image>
                    <span>1.5小时</span>
                    <van-image :src="camera"></van-image>
                    <span>12课时</span>
                </div>

                <div class="column1">
                    <van-image :src="collection"></van-image>
                    <span>4.8(753)</span>
                    <van-image :src="student"></van-image>
                    <span>2K学员</span>
                </div>


                </p>
                <p style="margin: 10px 0;font-size: 0.14rem;">如果你希望将AI大模型技术融入 Go 项目提升开发效率，却找不到对 Go
                    开发者更友好的AI大模型学习资料，选这门课就对了，因为这门专为 Go
                    开发者量身定制。课程以“智能办公助手”项目驱动教学，首先带你夯实 AI 核心基础、大模型应用开发基础，然后为你深度剖析 LangchainGo 框架底层原理，在项目实战中循序渐进的拔高你的 AI
                    技能，让你拥有 AI +Go 高效开发新范式及完美融合的实战落地能力，最终达成 AI + GO 技术和实践经验的双重收获。</p>
                <!-- tabs -->
                <van-tabs v-model:active="active" animated class="tabs">
                    <!--  <van-tab v-for="index in tabName" :title="index.tab" @click-tab="changePage(index.tab)">
                        <van-cell :title="index.tab" value="查看更多">
                        </van-cell>
                      
                    </van-tab> -->
                    <van-tab title="简介" class="tabs_abstract">

                        <van-cell title="简介" value="查看更多" />
                        <p style="margin: 10px 0;font-size: 0.14rem;">
                            课程的核心是基于go结合大模型开发相关的AI应用产品为主，包含AI如何调用系统业务如何基于AI定制功能，但模型训练并不在本次课程内容中，课程的扩展有讲关于如何在本地部署大模型以及使用也有讲如何基于langchain扩展对其他模型的支持。
                        </p>
                        <van-cell title="课程评价" value="查看更多" />
                        <!-- 卡片 -->
                        <div class="card">
                            <div class="card1 mr">
                                <p class="mb">⭐ 4.8</p>
                                <p>评分</p>
                            </div>
                            <div class="card1">
                                <p class="mb">⭐ 753</p>
                                <p>学员</p>
                            </div>
                        </div>
                        <!-- 学员评论 -->
                        <div class="student_comment">
                            <div class="student_card" v-for="item in studentInfo" :key="item">
                                <div class="left">
                                    <van-image :src="item.icon" round width="40" height="40"></van-image>
                                </div>
                                <div class="right">
                                    <p class="studentname class14">{{ item.name }}</p>
                                    <p class="commenttime" style="color: #ccc;">{{ item.commentTime }}</p>
                                    <p class="comment class14">{{ item.description }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 学员作业 -->
                        <div class="studentWork">
                            <van-cell title="学员作业" value="查看更多" />
                            <!-- 作业宫格图片 -->
                            <div class="studentPic">
                                <van-image :src="value" v-for="value in studentPic" :key="value"></van-image>
                            </div>
                            <van-button block>添加作业</van-button>
                        </div>
                        <!-- 评论 -->
                        <van-cell title="评论" value="我要评论" />
                        <div class="student_comment">
                            <div class="student_card" v-for="item in studentInfo" :key="item">
                                <div class="left">
                                    <van-image :src="item.icon" round width="40" height="40"></van-image>
                                </div>
                                <div class="right">
                                    <p class="studentname class14">{{ item.name }}</p>
                                    <p class="commenttime" style="color: #ccc;">{{ item.commentTime }}</p>
                                    <p class="comment class14">{{ item.description }}</p>
                                    <p class="comment_row">
                                        <van-image :src="eye"></van-image>
                                        <span>299</span>
                                        <van-image :src="comment"></van-image>
                                        <span>17</span>
                                        <van-image :src="thumbsup"></van-image>
                                        <span>29</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="课程" class="tabs_course">

                        <van-cell title="课程" value="查看更多" />
                        <!-- 卡片 -->
                        <div class="course_card" v-for="item in courseInfo">
                            <div class="top" :key="item">
                                <div class="left">
                                    <van-image :src="item.icon"></van-image>
                                </div>
                                <div class="right">
                                    <p class="class14">{{ item.title }}</p>
                                    <p> {{ item.lesson }}</p>
                                </div>
                            </div>
                            <div class="bottom">
                                {{ item.description }}
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </main>
    </div>
    <router-view v-else></router-view>
</template>

<style lang="scss" scoped>
html,
body {
    position: relative;

}

.coursedetail {
    display: flex;
    flex-direction: column;
}

// header{
//     position: fixed;
//     top: 0;
//     left: 0;
// }
main {
    flex: 1;
    overflow: auto;
}

.cover {
    position: relative;
}

.video-btn {
    position: absolute;
    top: 20%;
    left: 50%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);

    .van-icon {
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.my-video {
    position: fixed;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

//简介信息
.abstractInfo {

    padding: 10px;

    .teacher_info {
        display: flex;
        align-items: center;

        .van-image {
            margin-right: 10px;
        }
    }

    .classdata {
        .van-image {
            width: 0.16rem;
            height: 0.16rem;
            margin-right: 0.1rem;
        }

        span {
            margin-right: 1rem;
        }

        .column1 {
            display: flex;
            align-items: center;
            margin-bottom: 0.08rem;
            justify-content: flex-start;
        }
    }

    .tabs {

        // 简介
        .tabs_abstract {

            //卡片
            .card {
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;

                .card1 {
                    // flex: 1;
                    width: 48%;
                    background-color: #FFF1F3;

                    height: 80px;
                    color: #000;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-size: 0.14rem;

                    .mb {
                        margin-bottom: .1rem;
                    }

                    .mr {
                        margin-right: 20px;
                    }
                }
            }

            .studentWork {
                display: flex;
                flex-direction: column;

                .studentPic {
                    width: 100vw;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .van-image {
                        width: 46vw;
                        margin-right: 10px;
                        margin-bottom: 10px;
                    }
                }
            }

            // 学员评论
            .student_comment {
                margin-top: 20px;

                .student_card {
                    display: flex;
                    margin-bottom: 14px;

                    .right {
                        flex: 1;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                }


            }

        }

        //课程
        .tabs_course {
            .course_card {
                display: flex;
                flex-direction: column;
                margin-bottom: 20px;

                .top {
                    display: flex;
                    height: 80px;
                    margin-bottom: 14px;

                    .left {
                        width: 33vw;
                        height: 80px;

                        .van-image {

                            width: 100%;
                            height: 100%;

                        }
                    }

                    .right {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                        padding-left: 10px;
                        box-sizing: border-box;
                    }
                }

            }
        }
    }
}

.class14 {
    font-size: 0.14rem;
}

.comment_row {
    display: flex;
    margin-top: 10px;

    // .van-image{
    //     width: 12px;
    //     height: 12px;
    // }
    span {
        margin-left: 10px;
        margin-right: 10px;
    }
}
</style>